body{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:repeat(5, 1fr);
    background-color:rgb(18, 17, 17);
    margin:0px;
}
nav{
grid-column:3/4;
text-align:center;
font-size: 25px;
}
nav a{
    text-decoration:none;
    margin:5px;


}


nav a:nth-child(odd){
    color:rgb(209, 20, 216)
}
nav a:nth-child(even){
    color:blue
}

#DrakeL{
   margin-left:auto;
   margin-right:auto;
grid-column:1/2;
grid-row:2/3

   
}
#YeL{
   margin-left:auto;
   margin-right:auto;
   grid-column:2/3;
grid-row:2/3
}
#ColeL{
    margin-left:auto;
    margin-right:auto;
    grid-column:3/4;
 grid-row:2/3
}

.H:hover{
    transition:1.5s;
    transform:scale(1.1);
    filter:brightness(150%);
    box-shadow:0px 0px 10px 10px gold;
}
nav a:hover{
    color:white;
}
h1{
    grid-column:2/3;
    grid-row:1/2;
    text-align:center;
    color:rgb(209, 42, 24);
   text-decoration-line:underline
}

p{
    padding:25px;
    text-align:center;
    font-size:small;
}
.Drakep{
   color: #008000;
    grid-column:1/2;
    grid-row:3/5;

}
.Kanyep{
    color:silver;
    grid-row:3/5;
    grid-column:2/3
}
.Jcolep{
color:white;
grid-row:3/5;
grid-column:3/4;
}
@media (max-width:961px){
    body{
        grid-template-columns: 1fr 1fr;
        grid-template-rows:repeat(4, 1fr)
    }
    h1{
        grid-column:1/2;
        grid-row:1/2;
    }
    nav{
        grid-column:2/3;
        grid-row:1/2;
        font-size:xx-large;
        display:flex;
        flex-direction:column
    }
    #DrakeL{
        grid-column:1/2;
        grid-row:2/3
    }
    .Drakep{
        grid-column:2/3;
        grid-row:2/3
    }
    #YeL{
        grid-column:1/2;
        grid-row:3/4
    }
    .Kanyep{
        grid-column:2/3;
        grid-row:3/4
    }
    #ColeL{
        grid-column:1/2;
        grid-row:4/5
    }
    .Jcolep{
        grid-column:2/3;
        grid-row:4/5
    }
}
@media(max-width:600px){
    body{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 1fr);
    }
    h1{
        grid-column:1/2;
        grid-row:1/2
    }
    nav{
        grid-column:1/2;
        grid-row:2/3
    }
    #DrakeL{
        grid-column:1/2;
        grid-row:3/4;
    }
    .Drakep{
        grid-column:1/2;
        grid-row:4/5;
        border:2px solid white;
        padding:auto;
        margin:auto
    }
    #YeL{
        grid-column:1/2;
        grid-row:5/6
    }
    .Kanyep{
        grid-column:1/2;
        grid-row:6/7;
        border:2px solid white;
        padding:auto;
        margin:auto
    }
    #ColeL{
        grid-column:1/2;
        grid-row:7/8
    }
    .Jcolep{
        grid-column:1/2;
        grid-row:8/9;
        border:2px solid white;
        padding:auto;
        margin:auto
    }
}